<template>
    <div class="header">
        <div class="container clearfix">
            <router-link class="logo" to="/home"></router-link>
            <div class="title">
                <h2>{{ title }}</h2>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
            </div>

            <div class="topbar">
                <span class="user">
                    <router-link to="/userspace" class="user-name">
                        <span class="name">{{ userName }}</span>
                        <i class="iconfont icon-xialajiantouxiao"></i>
                    </router-link>
                    <div class="menu-wrapper" ref="menu">
                        <ul>
                            <li>
                                <router-link to="/userspace">个人中心</router-link>
                            </li>
                            <li>
                                <router-link to="/userspace/mytrade">我的订单</router-link>
                            </li>
                            <li>
                                <a>我的喜欢</a>
                            </li>
                            <li>
                                <a @click="logout">退出登录</a>
                            </li>
                        </ul>
                    </div>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    props: ["title"],
    computed:{
        ...mapGetters("user",["userName"])
    },
    methods: {
        logout(){
            this.$store.dispatch("user/userLogout");
            this.$router.replace("/home");
            this.$message({
                message: "退出成功",
                type: "success",
            });
        }
    },
};
</script>

<style lang="less" scoped>
.header {
    background-color: rgb(255, 255, 255);
    height: 100px;
    border-bottom: 2px solid rgb(91, 81, 69);

    a {
        text-decoration: none;
        color: #424242;
    }

    .container {
        width: 1200px;
        margin: 0 auto;

        .logo {
            display: block;
            background-image: url("@/assets/img/logo-head.png");
            background-size: 60px 50px;
            margin-top: 26px;
            width: 60px;
            height: 50px;
            float: left;
        }

        .title {
            float: left;
            margin-top: 30px;
            margin-left: 40px;

            h2 {
                float: left;
                font-size: 28px;
                height: 48px;
                line-height: 40px;
                margin-top: 5px;
                color: #424242;
            }

            p {
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                white-space: nowrap;
                margin-top: 22px;
                float: left;
                margin-left: 10px;
                color: #757575;
            }
        }

        .topbar {
            float: right;
            margin-top: 30px;

            .user {
                float: left;
                width: 110px;
                text-align: center;
                height: 40px;
                position: relative;

                .user-name {
                    display: block;
                    width: 110px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 12px;
                    z-index: 21;
                    position: relative;
                    background-color: white;

                    .name {
                        margin-right: 10px;
                    }

                    i {
                        font-size: 12px;
                    }
                }

                .menu-wrapper {
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
                    background-color: white;
                    overflow: hidden;
                    transition: all 0.3s;
                    height: 0;
                    position: relative;
                    z-index: 20;

                    ul {
                        padding: 7px 0;
                        li {
                            a {
                                height: 30px;
                                line-height: 30px;
                                display: block;
                                font-size: 12px;
                                cursor: pointer;
                            }

                            a:hover {
                                background: rgb(245, 245, 245);
                            }
                        }
                    }
                }
            }

            .user:hover {

                .menu-wrapper{
                    height: 134px;
                }
                a:hover {
                    color: rgb(255,106,0);
                }
            }
        }
    }
}
</style>